export default class Donut extends window.TMap.DOMOverlay {
  constructor(options) {
    super(options);
  }

  onInit({
    position,
    data,
         } = {}) {
    Object.assign(this, {
      position,
      data,
    });
  }

  createDOM() {
    const dom = document.createElement('div');
    dom.classList.add('custom-marker-wrapper');
    dom.classList.add(this.data.type);
    // dom.setAttribute('class', 'custom-marker-wrapper');
    dom.innerHTML = `<div class="marker">
                        <div class="base"></div>
                        <div class="label"><span>${this.data.label}</span></div>
                     </div>`;
    // click事件监听
    this.onClick = () => {
      // DOMOverlay继承自EventEmitter，可以使用emit触发事件
      this.emit('click');
    };
    // pc端注册click事件，移动端注册touchend事件
    dom.addEventListener('click', this.onClick);
    return dom;
  }

  updateDOM() {
    if (!this.map) {
      return;
    }

    // 经纬度坐标转容器像素坐标
    let pixel = this.map.projectToContainer(this.position);
    let left = pixel.getX() - this.dom.clientWidth / 2 + 'px';
    let top = pixel.getY() - this.dom.clientHeight + 'px';
    this.dom.style.transform = `translate(${left}, ${top})`;
    // this.dom.style.transform = `translate(${pixel.x - (this.dom.clientWidth / 2) }px, ${pixel.y - this.dom.clientHeight}px)`;
  }

  onDestroy() {
    if (this.onClick) {
      this.dom.removeEventListener('click', this.onClick);
    }
  }
}
